<template>
  <div>
    <el-dialog :visible.sync="infocardshow" width="1000px">
      <el-container style="margin-top: -45px">
        <el-main>
          <el-card>
            <div slot="header" class="clearfix">
              <span style="font-size: 20px; font-weight: bold"
                >项目销售浮动金额申报</span
              >
              <el-button style="float: right" type="danger" size="small" @click="deleteproject"
                >整单作废</el-button
              >
            </div>

            <h4 style="margin-top: -5px">基本信息</h4>
            <el-descriptions :column="7">
              <el-descriptions-item label="项目名称" :span="3">
                <el-input
                  v-model="form.name"
                  style="width: 98%; margin-top: -8px"
                  :disabled="!isadd"
                ></el-input>
              </el-descriptions-item>

              <el-descriptions-item label="项目编号" :span="2">
                <el-input
                  v-model="form.sn"
                  style="width: 95%; margin-top: -8px"
                  :disabled="!isadd"
                ></el-input>
              </el-descriptions-item>

              <el-descriptions-item label="项目负责人" :span="2" v-if="isadd">
                <remote-select-user
                  ref="rsu"
                  :rsustyles="rsustyles"
                ></remote-select-user>
              </el-descriptions-item>

              <el-descriptions-item label="项目负责人" :span="2" v-if="!isadd">
                <el-input
                  v-model="form.username"
                  style="width: 95%; margin-top: -8px"
                  :disabled="!isadd"
                ></el-input>
              </el-descriptions-item>
            </el-descriptions>

            <h4>预付款信息</h4>
            <el-descriptions :column="2">
              <el-descriptions-item label="预收款到账金额" :span="1">
                <el-input
                  type="number"
                  v-model="form.prefund"
                  style="width: 96%; margin-top: -8px"
                ></el-input>
              </el-descriptions-item>

              <el-descriptions-item label="预收款到账时间" :span="1">
                <el-date-picker
                  placeholder="选择日期"
                  v-model="form.prefunddate"
                  style="width: 97%; margin-top: -8px"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                ></el-date-picker>
              </el-descriptions-item>
            </el-descriptions>

            <h4>浮动金额信息</h4>
            <el-descriptions :column="3">
              <el-descriptions-item label="合同金额" :span="1">
                <el-input
                  type="number"
                  v-model="form.fund"
                  style="width: 96%; margin-top: -8px"
                ></el-input>
              </el-descriptions-item>

              <el-descriptions-item label="准签线价格" :span="1">
                <el-input
                  type="number"
                  v-model="form.a"
                  style="width: 96%; margin-top: -8px"
                ></el-input>
              </el-descriptions-item>

              <el-descriptions-item label="贡献毛利数" :span="1">
                <el-input
                  type="number"
                  v-model="b"
                  style="width: 96%; margin-top: -8px"
                  :disabled="true"
                ></el-input>
              </el-descriptions-item>

              <el-descriptions-item label="回款系数" :span="1">
                <el-input
                  type="number"
                  v-model="form.k1"
                  style="width: 96%; margin-top: -8px"
                ></el-input>
              </el-descriptions-item>

              <el-descriptions-item label="质保金系数" :span="1">
                <el-input
                  type="number"
                  v-model="form.k2"
                  style="width: 96%; margin-top: -8px"
                ></el-input>
              </el-descriptions-item>

              <el-descriptions-item label="质保期系数" :span="1">
                <el-input
                  type="number"
                  v-model="form.k3"
                  style="width: 96%; margin-top: -8px"
                ></el-input>
              </el-descriptions-item>
            </el-descriptions>

            <h4>浮动工资信息</h4>

            <el-descriptions :column="3">
              <el-descriptions-item label="浮动工资总额" :span="1">
                <el-input
                  type="number"
                  v-model="floatsum"
                  style="width: 96%; margin-top: -8px"
                  :disabled="true"
                ></el-input>
              </el-descriptions-item>

              <el-descriptions-item label="浮动比例" :span="1">
                <el-input
                  type="number"
                  v-model="form.floatraito"
                  style="width: 96%; margin-top: -8px"
                ></el-input>
              </el-descriptions-item>

              <el-descriptions-item label="本月浮动金额" :span="1">
                <el-input
                  type="number"
                  v-model="floatnow"
                  style="width: 96%; margin-top: -8px"
                  :disabled="true"
                ></el-input>
              </el-descriptions-item>
              <!-- 
              <el-descriptions-item label="比例责任人" :span="1">
                <remote-select-user
                  ref="rsu2"
                  :rsustyles="rsustyles"
                ></remote-select-user>
              </el-descriptions-item> -->
            </el-descriptions>

            <el-button
              type="primary"
              style="width: 100%; margin-top: 20px"
              v-if="isadd"
              @click="createproject"
              >填写明细</el-button
            >

            <!-- <el-card style="margin-top:20px">
            <div slot="header" class="clearfix">
              <span>人员分配明细</span>
            </div> -->
            <!-- <span style="font-weight:bold">浮动工资分配明细</span> -->
            <div v-if="!isadd">
              <h4>浮动工资分配明细</h4>
              <el-button
                icon="el-icon-plus"
                size="mini"
                @click="add()"
                style="margin-left: 5px"
                >新增</el-button
              >

              <el-table
                :data="detailtableform"
                border
                style="width: 100%"
                :header-cell-style="{
                  background: '#fafafa',
                  color: '#979b9f',
                  fontWeight: 'normal',
                }"
              >
                <el-table-column
                  prop="name"
                  label="姓名"
                  header-align="center"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="role"
                  label="角色"
                  header-align="center"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="detailraito"
                  label="浮动占比"
                  header-align="center"
                  align="center"
                >
                </el-table-column>

                <el-table-column
                  prop="detailfund"
                  label="浮动金额"
                  header-align="center"
                  align="center"
                >
                </el-table-column>

                <el-table-column
                  prop="nowfund"
                  label="当月兑现(60%)"
                  header-align="center"
                  align="center"
                >
                </el-table-column>

                <el-table-column
                  prop="afterfund"
                  label="回款比例发放(40%)"
                  header-align="center"
                  align="center"
                >
                </el-table-column>

                <el-table-column
                  fixed="right"
                  label="操作"
                  width="100"
                >
                  <template slot-scope="scope">
                    <el-button
                      @click="edit(scope.row,scope.$index)"
                      type="text"
                      size="small"
                      >编辑</el-button
                    >
                    <el-button
                      type="text"
                      size="small"
                      @click="deletedetail(scope.row,scope.$index)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>

              <h4>浮动金额信息</h4>
              <div style="margin-top: 10px">
                <fileupload ref="fileupload"></fileupload>
              </div>

              <el-button
                type="success"
                style="width: 100%; margin-top: 20px"
                v-if="status&!isadd"
                @click="addpost()"
                >发起审批</el-button
              >

              <el-button
                type="warning"
                style="width: 100%; margin-top: 20px"
                v-if="!status&!isadd"
                @click="editpost()"
                >重新审批</el-button
              >
            </div>
          </el-card>
        </el-main>
      </el-container>

      <el-dialog
        title="浮动工资分配明细"
        :visible.sync="detailcard"
        width="60%"
        left
        :append-to-body="true"
      >
        <el-form ref="form" :model="detailform" label-width="80px">
          <el-form-item label="人员姓名" v-if="detailedit">
            <remote-select-user
              ref="rsu3"
              :rsustyles="rsustyles"
            ></remote-select-user>
          </el-form-item>

          <el-form-item label="人员姓名" v-if="!detailedit">
            <el-input
              v-model="detailform.name"
              style="width: 95%"
              :disabled="!detailedit"
            ></el-input>
          </el-form-item>

          <el-form-item label="人员角色">
            <el-select
              v-model="detailform.role"
              placeholder="请选择人员角色"
              style="width: 95%"
              :disabled="!detailedit"
            >
              <el-option label="销售" value="销售"></el-option>
              <el-option label="规划" value="规划"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="浮动占比">
            <el-input
              v-model="detailform.detailraito"
              style="width: 95%"
            ></el-input>
          </el-form-item>

          <el-form-item label="浮动金额">
            <el-input
              v-model="detailfund"
              style="width: 95%"
              :disabled="true"
            ></el-input>
          </el-form-item>

          <el-form-item label="当月兑现">
            <el-input
              v-model="nowfund"
              style="width: 95%"
              :disabled="true"
            ></el-input>
          </el-form-item>

          <el-form-item label="回款发放">
            <el-input
              v-model="afterfund"
              style="width: 95%"
              :disabled="true"
            ></el-input>
          </el-form-item>

          <el-form-item v-if="detailedit">
            <el-button type="primary" @click="adddetail()" style="width: 100%"
              >新增</el-button
            >
          </el-form-item>

          <el-form-item v-if="!detailedit">
            <el-button type="primary" @click="editdetail()" style="width: 100%"
              >修改</el-button
            >
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-dialog>
  </div>
</template>
  
  <script>
import RemoteSelectUser from "../common/RemoteSelectUser.vue";
import Fileupload from "../common/fileupload.vue";
export default {
  components: { RemoteSelectUser, Fileupload },
  props: ["form", "detailtableform"],
  computed: {
    b() {
      var num = this.form.fund - this.form.a;
      num = num.toFixed(2);
      return num;
    },

    floatsum() {
      var num = this.b * 0.07;
      num = num.toFixed(2);
      return num;
    },

    floatnow() {
      var num = this.floatsum * this.form.k1 * this.form.floatraito;
      num = num.toFixed(2);
      return num;
    },

    detailfund() {
      var num = this.floatnow * this.detailform.detailraito;
      num = num.toFixed(2);
      return num;
    },
    nowfund() {
      var num = this.detailfund * 0.6;
      num = num.toFixed(2);
      return num;
    },
    afterfund() {
      var num = this.detailfund * 0.4;
      num = num.toFixed(2);
      return num;
    },
  },

  created() {},

  data() {
    return {
      isadd: false,

      status: true,

      detailedit:true,

      rsustyles: {
        width: "95%",
        marginTop: "-8px",
      },

      projectid: "",

      infocardshow: false,

      editinfo: false,

      detailcard: false,

      detailform: {},
      
      nowindex:null,



      // rules: {

      //   name: [
      //     { required: true, message: "请填写项目名称", trigger: "blur" },
      //   ],
      //   sn: [
      //     { required: true, message: "请填写项目编号", trigger: "blur" },
      //   ],

      //   user: [
      //     { required: true, message: "请选择项目负责人", trigger: "change" },
      //   ],

      //   prefund: [
      //     { required: true, message: "请填写预收款到账金额", trigger: "blur" },
      //   ],

      //   prefunddate: [{ required: true, message: "请填写预收款到账时间", trigger: "blur" }],

      //   fund: [{ required: true, message: "请填写合同金额", trigger: "blur" }],

      //   a: [{ required: true, message: "请填写准签线价格", trigger: "blur" }],

      //   k1: [{ required: true, message: "请填写回款系数", trigger: "blur" }],
      //   k2: [
      //     { required: true, message: "请填写质保金系数", trigger: "blur" },
      //   ],
      //   k3: [
      //     { required: true, message: "请填写质保期系数", trigger: "blur" },
      //   ],

      //   k3: [
      //     { required: true, message: "请填写质保期系数", trigger: "blur" },
      //   ],
      // },
    };
  },
  methods: {
    changestatus(val) {
      this.status = val;
    },
    // showtext() {
    //   console.log(this.$refs.rsu2.postvalue);
    //   console.log(this.$refs.rsu.postvalue);
    // },

    async addpost() {
      let datas = {
        projectid: this.projectid,
        form: this.form,
        user: this.$refs.rsu.userid,
        b: this.b,
        floatsum: this.floatsum,
        floatnow: this.floatnow,
        creater: sessionStorage.getItem("userid"),
        detailtableform: this.detailtableform,
        fileinfo: this.$refs.fileupload.fileinfo,
      };
      this.$axios
        .post("api/award/addpost", datas)
        .then((response) => {
          if (response.data.code == 200) {
            this.$notify({
              title: "录入正确",
              message: response.data.msg,
              type: "success",
              duration: 1500,
            });
            this.projectid = response.data.id;
            this.status = false;
          } else {
            this.$notify({
              title: "录入有误",
              message: response.data.msg,
              type: "error",
              duration: 1500,
            });
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },


    async editpost() {
      let datas = {
        projectid: this.projectid,
        form: this.form,
        b: this.b,
        floatsum: this.floatsum,
        floatnow: this.floatnow,
        creater: sessionStorage.getItem("userid"),
        detailtableform: this.detailtableform,
        fileinfo: this.$refs.fileupload.fileinfo,
      };
      this.$axios
        .post("api/award/editpost", datas)
        .then((response) => {
          if (response.data.code == 200) {
            this.$notify({
              title: "录入正确",
              message: response.data.msg,
              type: "success",
              duration: 1500,
            });
            this.projectid = response.data.id;
            this.status = false;
          } else {
            this.$notify({
              title: "录入有误",
              message: response.data.msg,
              type: "error",
              duration: 1500,
            });
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    async createproject() {
      let datas = {
        form: this.form,
        user: this.$refs.rsu.userid,
        b: this.b,
        floatsum: this.floatsum,
        floatnow: this.floatnow,
        creater: sessionStorage.getItem("id"),
      };
      this.$axios
        .post("api/award/createproject", datas)
        .then((response) => {
          if (response.data.code == 200) {
            this.$notify({
              title: "录入正确",
              message: response.data.msg,
              type: "success",
              duration: 1500,
            });
            this.projectid = response.data.id;
            this.form.username=this.$refs.rsu.username;
            this.status = true;
            this.isadd=false;
          } else {
            this.$notify({
              title: "录入有误",
              message: response.data.msg,
              type: "error",
              duration: 1500,
            });
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    add() {
      this.detailcard = true;
      this.detailedit=true;
      this.detailform = {};
    },

    edit(row,rowIndex) {
      this.detailcard = true;
      this.detailedit= false;
      this.detailform = row;
      this.nowindex=rowIndex      
    },

    async adddetail() {
      let datas = {
        form: this.detailform,
        user: this.$refs.rsu3.userid,
        detailfund: this.detailfund,
        nowfund: this.nowfund,
        afterfund: this.afterfund,
        id: this.projectid,
      };
      console.log(datas.form.role)
      this.$axios
        .post("api/award/adddetail", datas)
        .then((response) => {
          if (response.data.code == 200) {
            this.$notify({
              title: "录入正确",
              message: response.data.msg,
              type: "success",
              duration: 1500,
            });

            this.detailtableform.push({
              name: response.data.name,
              role: response.data.role,
              detailraito: response.data.detailraito,
              nowfund: response.data.nowfund,
              afterfund: response.data.afterfund,
              detailfund: response.data.detailfund,
            });
          } else {
            this.$notify({
              title: "录入有误",
              message: response.data.msg,
              type: "error",
              duration: 1500,
            });
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },


    async editdetail() {
      let datas = {
        form: this.detailform,
        detailfund: this.detailfund,
        nowfund: this.nowfund,
        afterfund: this.afterfund,
      };
      this.$axios
        .post("api/award/editdetail", datas)
        .then((response) => {
          if (response.data.code == 200) {
            this.$notify({
              title: "修改正确",
              message: response.data.msg,
              type: "success",
              duration: 1500,
            });
            this.detailtableform[this.nowindex].detailraito=response.data.detailraito;
            this.detailtableform[this.nowindex].nowfund=response.data.nowfund;
            this.detailtableform[this.nowindex].afterfund=response.data.afterfund;
            this.detailtableform[this.nowindex].detailfund=response.data.detailfund;
   
          } else {
            this.$notify({
              title: "录入有误",
              message: response.data.msg,
              type: "error",
              duration: 1500,
            });
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    async deletedetail(row,rowIndex) {
      this.$confirm("是删除该条信息？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let datas = {
            id: row.id,
          };
          this.$axios
            .post("api/award/deletedetail", datas)
            .then((response) => {
              this.$message({
                message: response.data.msg,
                type: "success",
              });
              this.detailtableform.splice(rowIndex, 1);
            })
            .catch(function (error) {
              console.log(error);
            });
        })
        .catch(function (error) {
          console.log(error);
        });
    },


    async deleteproject() {
      this.$confirm("是否整单作废？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let datas = {
            id: this.projectid,
          };
          this.$axios
            .post("api/award/deleteproject", datas)
            .then((response) => {
              this.$message({
                message: response.data.msg,
                type: "success",
              });  
              this.infocardshow=false
              this.$router.go(0)        
            })
            .catch(function (error) {
              console.log(error);
            });
        })
        .catch(function (error) {
          console.log(error);
        });
    },

  },
};
</script>
  
  <style lang="scss" scoped>
</style>